<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

<style type="text/css">

.box {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
}

.headpic{
    background-image: url('headimages/1.jpg');
    height: 300px;
    width: 300px;
    background-color: blue;
    float: left;
}

</style>

</head>
<body>




    <div class="box">
        <div class="headpic"></div>
        <div class="headpic"></div>
    </div>


<div style="left: 50%;position: absolute;">
    <button id="btstop">stop</button>
    <button id="btstart">start</button>
    <button id="btadd">add</button>
</div>
</body>

<script type="text/javascript">

var imagearray = [
"headimages/1.jpg",
"headimages/2.jpg",
"headimages/3.jpg",
"headimages/4.jpg",
"headimages/5.jpg",
"headimages/6.jpg",
"headimages/7.jpg",
"headimages/8.jpg"
]

var k = 1;

var myinterval;

$('#btstart').click(function(event) {
    myinterval = setInterval(function (argument) {
        if(k < 8){
            console.log('interval');
            $('.headpic').css('background-image','url('+imagearray[k]+')');
            k++;
        }else{
            k = 0;
            $('.headpic').css('background-image','url('+imagearray[k]+')');
            k++;
        }
    },50);
});

$('#btstop').click(function(event) {
    clearInterval(myinterval);
});


$('#btadd').click(function(event) {
    $('.box').append('<div class="headpic"></div>')
});

</script>


</html>